<template>
	<view class="" >
		<view style="width: 670rpx;margin:20rpx auto;">
			<view class="item">
				<view class="left">
					<text>*</text>入圈类型
				</view>
				<view class="right1 flex_jc_sb">
					<picker style="flex: 1;" @change="bindPickerChange($event,'circle_type','circle_type_id')"
						:range="data.ulist.circle_type" range-key='name'>
						<view class="uni-input">
							{{data.params.circle_type_id? getname('circle_type',data.params.circle_type_id):'请选择'}}
						</view>
					</picker>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>*</text>姓名
				</view>
				<view class="right1">
					<input v-model="data.params.name" type="text" placeholder="只填写你的姓名" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>*</text>头像 <span style="font-size: 24rpx;color: #979797;">（使用真实头像可以获得更多关注~）</span>
				</view>
				<view class="right">
					<imageUpload :imgList='data.imgList' @change='imageChange' :maxCount="1" up-with="200"
						up-height="300" uptext="上传头像" upBcg='#fff'>
					</imageUpload>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>*</text>手机号
				</view>
				<view class="right1">
					<input v-model="data.params.mobile" type="number" maxlength="11" placeholder="请输入手机号" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>*</text>微信号
				</view>
				<view class="right1">
					<input v-model="data.params.wechat" placeholder="允许对方可以选择微信添加您" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>*</text>会员级别
				</view>
				<view class="right1 flex_jc_sb">
					<picker style="flex: 1;" @change="bindPickerChange($event,'circle_level','circle_level_id')"
						:range="data.ulist.circle_level" range-key='name'>
						<view class="uni-input">
							{{data.params.circle_level_id?getname('circle_level',data.params.circle_level_id):'请选择'}}
						</view>
					</picker>
					<uni-icons type="right"></uni-icons>
				</view>


			</view>
			<view class="item">
				<view class="left">
					<text>*</text>地区
				</view>
				<view class="right1" v-if="data.citylist.length!=0">
					<region :citylist='data.citylist' :isClose='false' @regionStr='regionStr'></region>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>*</text>地址
				</view>
				<view class="">
					<textarea v-model="data.params.address" placeholder="请输入所在办公地址"></textarea>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>*</text>公司名称
				</view>
				<view class="right1">
					<input v-model="data.params.company_name" type="text" placeholder="请填写工商注册主体或服务企业全称" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>*</text>公司职务
				</view>
				<view class="right1 flex_jc_sb">
					<input v-model="data.params.company_job" type="text" placeholder="请填写公司职务" />
					<!-- <picker style="flex: 1;" @change="bindPickerChange($event,'circle_job','company_job_id')"
						:range="data.ulist.circle_job" range-key='name'>
						<view class="uni-input">
							{{data.params.company_job_id? getname('circle_job',data.params.company_job_id):'请选择'}}
						</view>
					</picker>
					<uni-icons type="right"></uni-icons> -->
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>*</text>行业分类
				</view>
				<view class="right1 flex_jc_sb">
					<picker style="flex: 1;" @change="bindPickerChange($event,'circle_industry','circle_industry_id')"
						:range="data.ulist.circle_industry" range-key='name'>
						<view class="uni-input">
							{{data.params.circle_industry_id? getname('circle_industry',data.params.circle_industry_id):'请选择'}}
						</view>
					</picker>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>*</text>业务标签
				</view>
				<view class="tiplist">
					<view class="it" :class="item.isclick?'itact':''" v-for="(item,index) in data.ulist.circle_tag"
						:key="index" @click="changeTag(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>*</text>业务内容介绍
				</view>
				<view class="">
					<textarea v-model="data.params.info" placeholder="请简短介绍您的主业务和资源方向,此处信息将呈现在您个人简介，并作为业务搜索使用."></textarea>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>*</text>参会期数
				</view>
				<view class="right1">
					<input v-model="data.params.meeting_num" type="text" placeholder="第一次参会是第1期就填写1，单纯课程会员写1" />
				</view>
			</view>
		</view>
		<view class="" style="height: 300rpx;">

		</view>
		<view class="footer_kf">
			<view class="cont ">
				<view class="btn" @click="handleCreateOrder">
					提交申请
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import imageUpload from '@/components/imageUpload/imageUpload.vue'
	import region from '@/components/region/region.vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getdict,
		applyCircle,
		getcircle
	} from '@/common/http.api.js';
	import {
		reactive
	} from 'vue';
	const data = reactive({
		user: {},
		isyes: false,
		ulist: {},
		list: [],
		imgList: [],
		citylist: [],
		params: {
			circle_type_id: '',
			name: '',
			avatar: '',
			// avatar_text
			mobile: '',
			wechat: '',
			circle_level_id: '',
			city: '',
			address: '',
			company_name: '',
			company_job: '',
			circle_industry_id: '',
			tags: '',
			info: '',
			meeting_num: ''
		}
	})
	onLoad(() => {
		getdict({
			type: 'circle'
		}).then(res => {
			res.data.circle_tag.forEach(item => {
				item.isclick = false
			})
			data.ulist = res.data
			tx()
		})
		data.user = uni.getStorageSync('user')
	})

	function getname(tiplist, tipid) {
		return data.ulist[tiplist].find(item => {
			return item.id === tipid
		}).name
	}

	function bindPickerChange(e, list, id) {
		data.params[id] = data.ulist[list][e.detail.value].id
	}

	function imageChange(e) {
		data.imgList = e
		data.params.avatar = e[0].fullurl
	}

	function regionStr(e) {
		data.params.city = e
	}

	function changeTag(item) {
		item.isclick = !item.isclick
		data.list = data.ulist.circle_tag.filter(item => {
			return item.isclick
		})
		data.params.tags = data.list.map(item => {
			return item.id
		}).join(',')
	}

	function goback() {
		uni.navigateBack()
	}

	function changeYes() {
		data.isyes = !data.isyes
	}

	//重新填写 这个地方需要处理回显数据
	function tx() {
		data.user.circle = null
		getcircle().then(res => {
			data.params.circle_type_id = res.data.circle_type_id
			data.params.name = res.data.name
			data.params.avatar = res.data.avatar
			data.imgList = [{
				url: res.data.avatar_text
			}]
			data.params.mobile = res.data.mobile
			data.params.wechat = res.data.wechat
			data.params.circle_level_id = res.data.circle_level_id
			data.params.city = res.data.city
			data.citylist = res.data.city.split('/')
			data.params.address = res.data.address
			data.params.company_name = res.data.company_name
			data.params.company_job = res.data.company_job
			data.params.circle_industry_id = res.data.circle_industry_id
			data.params.tags = res.data.tags


			data.list = data.params.tags.split(',')
			data.ulist.circle_tag.forEach(item => {
				if (data.list.find(value => value == item.id)) {
					item.isclick = true
				}
			})
			data.params.info = res.data.info
			data.params.meeting_num = res.data.meeting_num
		})
	}

	function handleCreateOrder() {
		console.log(data.params.tags);
		if (data.params.circle_type_id == '') {
			uni.showToast({
				icon: 'none',
				title: '请选择入圈类型'
			})
			return
		}
		if (data.params.name == '') {
			uni.showToast({
				icon: 'none',
				title: '请填写姓名'
			})
			return
		}
		if (data.params.avatar == '') {
			uni.showToast({
				icon: 'none',
				title: '请上传头像'
			})
			return
		}
		if (data.params.mobile == '') {
			uni.showToast({
				icon: 'none',
				title: '请填写手机号'
			})
			return
		}
		if (data.params.wechat == '') {
			uni.showToast({
				icon: 'none',
				title: '请输入微信号'
			})
			return
		}
		if (data.params.circle_level_id == '') {
			uni.showToast({
				icon: 'none',
				title: '请选择会员级别'
			})
			return
		}
		if (data.params.city == '') {
			uni.showToast({
				icon: 'none',
				title: '请选择地区'
			})
			return
		}
		if (data.params.address == '') {
			uni.showToast({
				icon: 'none',
				title: '请填写地址'
			})
			return
		}
		if (data.params.company_name == '') {
			uni.showToast({
				icon: 'none',
				title: '请填写公司名称'
			})
			return
		}
		if (data.params.company_job == '') {
			uni.showToast({
				icon: 'none',
				title: '请选择公司职务'
			})
			return
		}
		if (data.params.circle_industry_id == '') {
			uni.showToast({
				icon: 'none',
				title: '请选择行业分类'
			})
			return
		}
		if (data.params.tags == '') {
			uni.showToast({
				icon: 'none',
				title: '请选择业务标签'
			})
			return
		}
		if (data.params.info == '') {
			uni.showToast({
				icon: 'none',
				title: '请填写业务内容'
			})
			return
		}
		if (data.params.meeting_num == '') {
			uni.showToast({
				icon: 'none',
				title: '请填写参会期数'
			})
			return
		}
		applyCircle(data.params).then(res => {
			if (res.code == 1) {
				uni.showToast({
					icon: 'none',
					title: '已提交修改申请'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		})
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(90deg, #E5F8FF 0%, #FFF3F8 100%);
	}

	.pop {
		text-align: center;
		margin: 160rpx auto;

		image {
			width: 90rpx;
			height: 90rpx;
		}

		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
			line-height: 47rpx;
			margin-top: 30rpx;
		}

		.t2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #8E8E8E;
			margin-top: 30rpx;
		}

		.t3 {
			width: 320rpx;
			height: 80rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 1px solid #0756FF;
			margin: 60rpx auto;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #0756FF;
			line-height: 80rpx;
		}

		.t4 {
			width: 320rpx;
			height: 80rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			background: #0756FF;
			margin: 60rpx auto;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #fff;
			line-height: 80rpx;
		}
	}

	.image {
		width: 750rpx;
		height: 320rpx;
	}

	.item {
		.left {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000;

			text {
				color: #FF2352;
			}
		}

		.right {
			margin: 20rpx auto;
		}

		.tiplist {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.it {
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				padding: 0rpx 15rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #D1D1D6;
				text-align: center;
				line-height: 60rpx;
				margin: 0rpx 20rpx 20rpx 0rpx;
			}

			.itact {
				background: #0756FF;
				color: #FFFFFF;
			}

		}

		.right1 {
			width: 670rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
			font-size: 28rpx;

			input {
				width: 100%;
			}

		}

		textarea {
			width: 670rpx;
			font-size: 28rpx;
			background: #FFFFFF;
			height: 140rpx;
			margin: 20rpx auto;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}

	.footer_kf {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1px 10rpx 0rpx rgba(0, 0, 0, 0.2);
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9;

		.cont {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			height: 120rpx;
			color: #000000;
			padding: 20rpx;
			box-sizing: border-box;
			.btn {
				width: 710rpx;
				height: 80rpx;
				border-radius: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				line-height: 80rpx;
				text-align: center;
				background: #0756FF;
				color: #fff;
			}
		}
	}
</style>